<template>
  <div>
    <h2>{{ name }} - {{ age }}</h2>
    <button @click="changeName">修改name</button>
    <button @click="changeAge">修改age</button>
  </div>
</template>

<script>
import { ref, watchEffect, watch } from "vue";
export default {
  setup() {
    //watchEffect: 自动收集响应式的依赖
    const name = ref("pengfan");
    const age = ref(18);

    const stop = watchEffect((onInvalidate) => {
      //根据name和age两个变量发送网络请求
      const timer = setTimeout(() => {
        console.log("网络请求成功了~");
      }, 2000);
      onInvalidate(() => {
        // 在这个函数中清除额外的副作用
        // request.cancel()
        clearTimeout(timer);
        console.log("onInvalidate");
      });

      console.log("name: ", name.value, "age: ", age.value);
    });

    const changeName = () => (name.value = "pengyutong");
    const changeAge = () => {
      age.value++;
      if (age.value > 25) {
        stop();
      }
    };

    return {
      name,
      age,
      changeName,
      changeAge,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>